<template>
    <transition name='fadeIn'>
        <div id="channel">
            <my-header fixed title='全部频道' v-goTop:click='true'>
                <a class="back-black" slot='left' @click='$router.go(-1)'></a>
            </my-header>

            <div class="content" :class="{isIOS: $store.state.device == 'ios'}">
                <div class="container" v-swiper:swiperRight='true'>
                    <!-- 原有的栏目 -->
                    <section class="column">
                        <div class="title">
                            <span class="htitle">
                                我的频道
                            </span>
                            点击删除以下频道
                        </div>
                        <ul>
                            <li v-for='(item,index) in indexColumn' @click='remove(item,index)' :key='index'>
                                <a href='javascript:;' :class='item.sys_class_id'>{{item.class_name}}</a>
                            </li>
                        </ul>
                    </section>
                    <!-- 可以添加的栏目 -->
                    <section class="column Recommend">
                        <div class="title">
                            <span class="htitle">
                                推荐频道
                            </span>
                            点击添加以下频道
                        </div>
                        <ul>
                            <li v-for='(item,index) in removeChannel' @click="add('removeChannel', index)" :key='index'>
                                <a href='javascript:;'>{{item.class_name}}</a>
                            </li>
                        </ul>
                        <ul>
                            <li v-for='(item,index) in channel' @click="add('channel', index, item.sys_class_id)" :key='index'>
                                <a href='javascript:;'>{{item.class_name}}</a>
                            </li>
                        </ul>
                    </section>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
import { get_local_cache, set_local_cache } from '@/config/cache'
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
    name: 'channel',
    data() {
        return {
            channel: '',
            removeChannel: []
        }
    },
    computed: {
        ...mapGetters('index', [
            'indexPage',
            'indexLocation',
            'indexColumn'
        ])
    },
    watch: {
        indexColumn() {
            this.set_indexColumn(this.indexColumn)
            this.set_indexActive(1)
        },
        removeChannel() {
            set_local_cache('removeChannel', this.removeChannel)
        }
    },
    methods: {
        ...mapMutations('index', [
            'set_indexActive',
            'set_indexPage',
            'set_indexLocation',
            'set_indexColumn'
        ]),
        ...mapActions('index', [
            'get_channel_data'
        ]),
        ...mapActions('index', [
            'set_class_data'
        ]),
        // 获取可以添加的栏目数据
        get_channel() {
            this.get_channel_data()
            .then(res => {
                if (res) {
                    this.channel = res.data.list
                }
            })
        },
        // 获取移除的频道
        get_removeChannel() {
            let removeChannel = JSON.parse(get_local_cache('removeChannel'))
            if (removeChannel) {
                this.removeChannel = removeChannel
            }
        },
        // 添加栏目
        add(type, index, sys_class_id) {
            if (type === 'channel') {
                this.set_class_data(sys_class_id)
                .then(res => {
                })
                let addEle = this.channel.splice(index, 1)
                this.indexColumn.push(...addEle)
            } else if (type === 'removeChannel') {
                let addEle = this.removeChannel.splice(index, 1)
                this.indexColumn.push(...addEle)
            }
        },
        // 移除栏目
        remove(item, index) {
            if (item.classpath !== 'news_recommend') {
                let removeEle = this.indexColumn.splice(index, 1)
                this.removeChannel.push(...removeEle)
            }
        },
        // 增减栏目之后，同步page、location对象
        sync() {
            let pageObj = {}
            let locationObj = {}
            for (let i = 0; i < this.indexColumn.length; i++) {
                var className = this.indexColumn[i].classpath
                if (this.indexPage[className] > 1) {
                    pageObj[className] = this.indexPage[className]
                } else {
                    pageObj[className] = 1
                }
                if (this.indexLocation[className] > 0) {
                    locationObj[className] = this.indexLocation[className]
                } else {
                    locationObj[className] = 0
                }
            }
            this.set_indexPage(pageObj)
            this.set_indexLocation(locationObj)
        }
    },
    mounted() {
        this.get_removeChannel()
        this.get_channel()
    },
    deactivated() {
        this.sync()
    }
}
</script>
<style lang='stylus'>
#channel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1000;
    background : #ffffff;
    .content {
        background-color: #ffffff;
        .column {
            margin-top: 0.133rem;
            .title {
                font-size: 12px;
                padding: 0 0.266rem;
                line-height: 2em;
                color: #666;
                margin-bottom: 0.266rem;
                .htitle {
                    color:#222222;
                    font-size: 18px;
                }
            }
            ul{
                margin: 0.266rem 0;
                font-size: 0;
                li {
                    display: inline-block;
                    width: 25%;
                    margin-bottom: 0.266rem;
                    animation: zoomIn .3s ease;
                    a {
                        display: block;
                        font-size: 16px;
                        margin: 0 0.213rem;
                        line-height: 2em;
                        color: #131313;
                        text-align: center;
                        text-decoration: none;
                        background-color #f1f3f6;
                        border-radius: 3px;
                        &.news_recommend {
                            background-color: #f1f3f6;
                            color: #b8bbbf;
                        }
                    }
                }
            }
        }
        .Recommend{
            ul{
                li{
                    a{
                        background-color #ffffff;
                        box-shadow: 0px 0px 2px #938f8f
                    }
                }
            }
        }
    }
}
</style>
